முன்னணி வலைப்பூட்டு API: வள ஒத்திசைவு முதன்மைகள்

நவீன வலைதளம் பெருகிய முறையில் சிக்கலானதாகி வருகிறது, பயன்பாடுகள் பெரும்பாலும் பல தாவல்கள் அல்லது சாளரங்களில் இயங்குகின்றன. இது localStorage, IndexedDB ஆகியவற்றில் சேமிக்கப்பட்ட தரவு அல்லது APIகள் வழியாக அணுகப்படும் சேவையகப் பக்க வளங்கள் போன்ற பகிரப்பட்ட வளங்களுக்கான ஒரேநேர அணுகலை நிர்வகிக்கும் சவாலை அறிமுகப்படுத்துகிறது. வலைப்பூட்டு API (Web Lock API) இந்த வளங்களுக்கான அணுகலை ஒருங்கிணைக்கவும், தரவு சிதைவைத் தடுக்கவும், தரவு நிலைத்தன்மையை உறுதிப்படுத்தவும் ஒரு தரப்படுத்தப்பட்ட பொறிமுறையை வழங்குகிறது.

வள ஒத்திசைவின் தேவையைப் புரிந்துகொள்ளுதல்

ஒரு பயனர் உங்கள் வலைப் பயன்பாட்டை இரண்டு வெவ்வேறு தாவல்களில் திறந்து வைத்திருக்கும் ஒரு காட்சியைக் கற்பனை செய்து பாருங்கள். இரண்டு தாவல்களும் localStorage-இல் உள்ள ஒரே பதிவை புதுப்பிக்க முயற்சிக்கின்றன. சரியான ஒத்திசைவு இல்லாமல், ஒரு தாவலின் மாற்றங்கள் மற்றொன்றை மேலெழுதக்கூடும், இது தரவு இழப்பு அல்லது முரண்பாடுகளுக்கு வழிவகுக்கும். இங்குதான் வலைப்பூட்டு API கைகொடுக்கிறது.

பாரம்பரிய வலை மேம்பாடு, நம்பிக்கை சார்ந்த பூட்டுதல் (சேமிப்பதற்கு முன் மாற்றங்களைச் சரிபார்ப்பது) அல்லது சேவையகப் பக்க பூட்டுதல் போன்ற நுட்பங்களை நம்பியுள்ளது. இருப்பினும், இந்த அணுகுமுறைகளைச் செயல்படுத்துவது சிக்கலானதாக இருக்கலாம் மற்றும் எல்லா சூழ்நிலைகளுக்கும் பொருத்தமானதாக இருக்காது. வலைப்பூட்டு API முன்னணியில் இருந்து ஒரேநேர அணுகலை நிர்வகிக்க எளிய, நேரடியான வழியை வழங்குகிறது.

வலைப்பூட்டு API-ஐ அறிமுகப்படுத்துதல்

வலைப்பூட்டு API என்பது ஒரு உலாவி API ஆகும், இது வலைப் பயன்பாடுகளை வளங்கள் மீது பூட்டுகளைப் பெறவும் வெளியிடவும் அனுமதிக்கிறது. இந்தப் பூட்டுகள் உலாவிக்குள் வைக்கப்பட்டு, ஒரு குறிப்பிட்ட மூலத்திற்குள் (origin) வரையறுக்கப்படலாம், இது மற்ற வலைத்தளங்களில் குறுக்கிடாமல் இருப்பதை உறுதி செய்கிறது. இந்த API இரண்டு முக்கிய வகையான பூட்டுகளை வழங்குகிறது: தனிப்பட்ட பூட்டுகள் மற்றும் பகிரப்பட்ட பூட்டுகள்.

தனிப்பட்ட பூட்டுகள்

ஒரு தனிப்பட்ட பூட்டு (exclusive lock) ஒரு வளத்திற்கு பிரத்தியேக அணுகலை வழங்குகிறது. ஒரு குறிப்பிட்ட பெயரில் ஒரு தனிப்பட்ட பூட்டை ஒரே நேரத்தில் ஒரு தாவல் அல்லது சாளரம் மட்டுமே வைத்திருக்க முடியும். localStorage-இல் தரவை எழுதுவது அல்லது சேவையகப் பக்க தரவுத்தளத்தைப் புதுப்பிப்பது போன்ற வளத்தை மாற்றியமைக்கும் செயல்பாடுகளுக்கு இது பொருத்தமானது.

பகிரப்பட்ட பூட்டுகள்

ஒரு பகிரப்பட்ட பூட்டு (shared lock) பல தாவல்கள் அல்லது சாளரங்கள் ஒரே நேரத்தில் ஒரு வளத்தின் மீது பூட்டை வைத்திருக்க அனுமதிக்கிறது. பயனருக்குத் தரவைக் காண்பிப்பது போன்ற வளத்தைப் படிக்கும் செயல்பாடுகளுக்கு இது பொருத்தமானது. பகிரப்பட்ட பூட்டுகளை ஒரே நேரத்தில் பல வாடிக்கையாளர்கள் வைத்திருக்க முடியும், ஆனால் ஒரு தனிப்பட்ட பூட்டு அனைத்து பகிரப்பட்ட பூட்டுகளையும் தடுக்கும், மற்றும் நேர்மாறாகவும் நடக்கும்.

வலைப்பூட்டு API-ஐப் பயன்படுத்துதல்: ஒரு நடைமுறை வழிகாட்டி

வலைப்பூட்டு API-ஐ navigator.locks பண்பு மூலம் அணுகலாம். இந்த பண்பு request() மற்றும் query() முறைகளுக்கான அணுகலை வழங்குகிறது.

ஒரு பூட்டைக் கோருதல்

request() முறையானது ஒரு பூட்டைக் கோரப் பயன்படுகிறது. இது பூட்டின் பெயர், ஒரு விருப்பத்தேர்வு பொருள் மற்றும் ஒரு அழைப்புச் செயல்பாட்டை (callback function) எடுக்கும். பூட்டு வெற்றிகரமாகப் பெறப்பட்ட பின்னரே அழைப்புச் செயல்பாடு செயல்படுத்தப்படும். விருப்பத்தேர்வுப் பொருள் பூட்டுப் பயன்முறையை ('exclusive' அல்லது 'shared') மற்றும் ஒரு விருப்பத்தேர்வான ifAvailable கொடியைக் குறிப்பிடலாம்.

ஒரு தனிப்பட்ட பூட்டைக் கோருவதற்கான ஒரு அடிப்படை எடுத்துக்காட்டு இதோ:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, async lock => {
  try {
    // Perform operations that require exclusive access to the resource
    console.log('Lock acquired!');

    // Simulate an asynchronous operation
    await new Promise(resolve => setTimeout(resolve, 2000));

    console.log('Releasing the lock.');
  } finally {
    // The lock is automatically released when the callback function returns or throws an error
    // But you can also release it manually (although it's generally not necessary).
    // lock.release();
  }
});

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், request() முறையானது 'my-resource' என்ற பெயரில் ஒரு தனிப்பட்ட பூட்டைப் பெற முயற்சிக்கிறது. பூட்டு கிடைத்தால், அழைப்புச் செயல்பாடு செயல்படுத்தப்படும். அழைப்புச் செயல்பாட்டிற்குள், வளத்திற்கு பிரத்தியேக அணுகல் தேவைப்படும் செயல்பாடுகளை நீங்கள் செய்யலாம். அழைப்புச் செயல்பாடு திரும்பும் போது அல்லது பிழையை வீசும் போது பூட்டு தானாகவே வெளியிடப்படும். finally தொகுதி ஒரு பிழை ஏற்பட்டாலும், எந்தவொரு தூய்மைப்படுத்தும் குறியீடும் செயல்படுத்தப்படுவதை உறுதி செய்கிறது.

`ifAvailable` விருப்பத்தைப் பயன்படுத்தும் ஒரு எடுத்துக்காட்டு இதோ:

            navigator.locks.request('my-resource', { mode: 'exclusive', ifAvailable: true }, lock => {
  if (lock) {
    console.log('Lock acquired immediately!');
    // Perform operations with the lock

  } else {
    console.log('Lock not immediately available, doing something else.');
    // Perform alternative operations
  }
}).catch(error => {
  console.error('Error requesting lock:', error);
});

            

              
                Copy
              
            
          

ifAvailable என்பது true என அமைக்கப்பட்டால், பூட்டு கிடைத்தால் `request` வாக்குறுதி உடனடியாக பூட்டுப் பொருளுடன் தீர்க்கப்படும். பூட்டு கிடைக்கவில்லை என்றால், வாக்குறுதி `undefined` உடன் தீர்க்கப்படும். பூட்டு பெறப்பட்டதா இல்லையா என்பதைப் பொருட்படுத்தாமல் அழைப்புச் செயல்பாடு செயல்படுத்தப்படும், இது இரு நிலைகளையும் கையாள உங்களை அனுமதிக்கிறது. பூட்டு கிடைக்காதபோது அழைப்புச் செயல்பாட்டிற்கு அனுப்பப்பட்ட பூட்டுப் பொருள் `null` அல்லது `undefined` ஆக இருக்கும் என்பதைக் கவனத்தில் கொள்ள வேண்டும்.

பகிரப்பட்ட பூட்டைக் கோருவதும் இதே போன்றது:

            navigator.locks.request('my-resource', { mode: 'shared' }, async lock => {
  try {
    // Perform read-only operations on the resource
    console.log('Shared lock acquired!');

    // Simulate an asynchronous read operation
    await new Promise(resolve => setTimeout(resolve, 1000));

    console.log('Releasing the shared lock.');
  } finally {
    // Lock is released automatically
  }
});

            

              
                Copy
              
            
          

பூட்டு நிலையைச் சரிபார்த்தல்

query() முறையானது பூட்டுகளின் தற்போதைய நிலையைச் சரிபார்க்க உங்களை அனுமதிக்கிறது. இது தற்போதைய மூலத்திற்கான செயலில் உள்ள பூட்டுகளைப் பற்றிய தகவல்களைக் கொண்ட ஒரு பொருளுடன் தீர்க்கப்படும் ஒரு வாக்குறுதியைத் தரும்.

            navigator.locks.query().then(lockInfo => {
  console.log('Lock information:', lockInfo);

  if (lockInfo.held) {
    console.log('Locks are currently held:');
    lockInfo.held.forEach(lock => {
      console.log(`  Name: ${lock.name}, Mode: ${lock.mode}`);
    });
  } else {
    console.log('No locks are currently held.');
  }

  if (lockInfo.pending) {
      console.log('Pending lock requests:');
      lockInfo.pending.forEach(request => {
          console.log(` Name: ${request.name}, Mode: ${request.mode}`);
      });
  } else {
      console.log('No pending lock requests.');
  }
});

            

              
                Copy
              
            
          

lockInfo பொருள் இரண்டு பண்புகளைக் கொண்டுள்ளது: held மற்றும் pending. held பண்பு என்பது பொருட்களின் ஒரு வரிசையாகும், ஒவ்வொன்றும் மூலத்தால் தற்போது வைக்கப்பட்டிருக்கும் ஒரு பூட்டைக் குறிக்கிறது. ஒவ்வொரு பொருளிலும் பூட்டின் name மற்றும் mode ஆகியவை உள்ளன. `pending` பண்பு என்பது வரிசையில் உள்ள, வழங்கப்படுவதற்குக் காத்திருக்கும் பூட்டுக் கோரிக்கைகளின் ஒரு வரிசையாகும்.

பிழை கையாளுதல்

request() முறையானது ஒரு வாக்குறுதியைத் தருகிறது, ஒரு பிழை ஏற்பட்டால் அது நிராகரிக்கப்படலாம். பொதுவான பிழைகள் பின்வருமாறு:

• AbortError: பூட்டுக் கோரிக்கை ரத்து செய்யப்பட்டது.
• SecurityError: பாதுகாப்புக் கட்டுப்பாடுகள் காரணமாக பூட்டுக் கோரிக்கை மறுக்கப்பட்டது.

எதிர்பாராத நடத்தையைத் தடுக்க இந்தப் பிழைகளைக் கையாள்வது முக்கியம். பிழைகளைப் பிடிக்க நீங்கள் ஒரு try...catch தொகுதியைப் பயன்படுத்தலாம்:

            navigator.locks.request('my-resource', { mode: 'exclusive' }, lock => {
  // ...
}).catch(error => {
  console.error('Error requesting lock:', error);
  // Handle the error appropriately
});

            

              
                Copy
              
            
          

பயன்பாட்டு நிகழ்வுகள் மற்றும் எடுத்துக்காட்டுகள்

வலைப்பூட்டு API-ஐ பகிரப்பட்ட வளங்களுக்கான ஒரேநேர அணுகலை நிர்வகிக்க பல்வேறு சூழ்நிலைகளில் பயன்படுத்தலாம். இதோ சில எடுத்துக்காட்டுகள்:

ஒரேநேர படிவச் சமர்ப்பிப்புகளைத் தடுத்தல்

ஒரு பயனர் தற்செயலாக ஒரு படிவத்தில் உள்ள சமர்ப்பிப்புப் பொத்தானை பலமுறை கிளிக் செய்யும் ஒரு காட்சியைக் கற்பனை செய்து பாருங்கள். இது பல ஒரே மாதிரியான சமர்ப்பிப்புகள் செயலாக்கப்படுவதற்கு வழிவகுக்கும். படிவத்தைச் சமர்ப்பிக்கும் முன் ஒரு பூட்டைப் பெற்று, சமர்ப்பிப்பு முடிந்ததும் அதை விடுவிப்பதன் மூலம் இதைத் தடுக்க வலைப்பூட்டு API-ஐப் பயன்படுத்தலாம்.

            async function submitForm(formData) {
  try {
    await navigator.locks.request('form-submission', { mode: 'exclusive' }, async lock => {
      console.log('Submitting form...');
      // Simulate form submission
      await new Promise(resolve => setTimeout(resolve, 3000));
      console.log('Form submitted successfully!');
    });
  } catch (error) {
    console.error('Error submitting form:', error);
  }
}

// Attach the submitForm function to the form's submit event
const form = document.getElementById('myForm');
form.addEventListener('submit', async (event) => {
  event.preventDefault(); // Prevent default form submission
  const formData = new FormData(form);
  await submitForm(formData);
});

            

              
                Copy
              
            
          

localStorage-இல் தரவை நிர்வகித்தல்

முன்னர் குறிப்பிட்டபடி, பல தாவல்கள் அல்லது சாளரங்கள் localStorage-இல் உள்ள ஒரே தரவை அணுகும்போது தரவு சிதைவைத் தடுக்க வலைப்பூட்டு API-ஐப் பயன்படுத்தலாம். ஒரு தனிப்பட்ட பூட்டைப் பயன்படுத்தி localStorage-இல் ஒரு மதிப்பை எவ்வாறு புதுப்பிப்பது என்பதற்கான எடுத்துக்காட்டு இதோ:

            async function updateLocalStorage(key, newValue) {
  try {
    await navigator.locks.request(key, { mode: 'exclusive' }, async lock => {
      console.log(`Updating localStorage key '${key}' to '${newValue}'...`);
      localStorage.setItem(key, newValue);
      console.log(`localStorage key '${key}' updated successfully!`);
    });
  } catch (error) {
    console.error(`Error updating localStorage key '${key}':`, error);
  }
}

// Example usage:
updateLocalStorage('my-data', 'new value');

            

              
                Copy
              
            
          

சேவையகப் பக்க வளங்களுக்கான அணுகலை ஒருங்கிணைத்தல்

வலைப்பூட்டு API-ஐ சேவையகப் பக்க வளங்களுக்கான அணுகலை ஒருங்கிணைக்கவும் பயன்படுத்தலாம். உதாரணமாக, சேவையகத்தில் தரவை மாற்றியமைக்கும் ஒரு API கோரிக்கையைச் செய்வதற்கு முன்பு நீங்கள் ஒரு பூட்டைப் பெறலாம். இது போட்டி நிலைகளைத் (race conditions) தடுத்து தரவு நிலைத்தன்மையை உறுதி செய்யும். பகிரப்பட்ட தரவுத்தளப் பதிவிற்கு எழுதும் செயல்பாடுகளை வரிசைப்படுத்த இதை நீங்கள் செயல்படுத்தலாம்.

            async function updateServerData(data) {
  try {
    await navigator.locks.request('server-update', { mode: 'exclusive' }, async lock => {
      console.log('Updating server data...');
      const response = await fetch('/api/update-data', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if (!response.ok) {
        throw new Error('Failed to update server data');
      }
      console.log('Server data updated successfully!');
    });
  } catch (error) {
    console.error('Error updating server data:', error);
  }
}

// Example usage:
updateServerData({ value: 'updated value' });

            

              
                Copy
              
            
          

உலாவி இணக்கத்தன்மை

2023-இன் பிற்பகுதியில், வலைப்பூட்டு API குரோம், பயர்பாக்ஸ், சஃபாரி மற்றும் எட்ஜ் உள்ளிட்ட நவீன உலாவிகளில் நல்ல ஆதரவைக் கொண்டுள்ளது. இருப்பினும், உற்பத்தியில் API-ஐப் பயன்படுத்துவதற்கு முன்பு Can I use... போன்ற வளங்களில் சமீபத்திய உலாவி இணக்கத்தன்மைத் தகவலைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும்.

பயனரின் உலாவியால் வலைப்பூட்டு API ஆதரிக்கப்படுகிறதா என்பதைச் சரிபார்க்க நீங்கள் அம்சக் கண்டறிதலைப் (feature detection) பயன்படுத்தலாம்:

            if ('locks' in navigator) {
  // Web Lock API is supported
  console.log('Web Lock API is supported!');
} else {
  // Web Lock API is not supported
  console.warn('Web Lock API is not supported in this browser.');
}

            

              
                Copy
              
            
          

வலைப்பூட்டு API-ஐப் பயன்படுத்துவதன் நன்மைகள்

• மேம்படுத்தப்பட்ட தரவு நிலைத்தன்மை: தரவு சிதைவைத் தடுத்து, பல தாவல்கள் அல்லது சாளரங்களில் தரவு சீராக இருப்பதை உறுதி செய்கிறது.
• எளிமைப்படுத்தப்பட்ட ஒரேநேரச் செயல்பாட்டு மேலாண்மை: பகிரப்பட்ட வளங்களுக்கான ஒரேநேர அணுகலை நிர்வகிக்க ஒரு எளிய மற்றும் தரப்படுத்தப்பட்ட பொறிமுறையை வழங்குகிறது.
• குறைக்கப்பட்ட சிக்கலான தன்மை: சிக்கலான தனிப்பயன் ஒத்திசைவு பொறிமுறைகளின் தேவையை நீக்குகிறது.
• மேம்பட்ட பயனர் அனுபவம்: எதிர்பாராத நடத்தையைத் தடுத்து, ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்துகிறது.

வரம்புகள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

• மூலத்தின் எல்லை: பூட்டுகள் மூலத்திற்கு (origin) மட்டுமே உரியவை, அதாவது அவை ஒரே டொமைன், நெறிமுறை மற்றும் போர்ட்டிலிருந்து வரும் தாவல்கள் அல்லது சாளரங்களுக்கு மட்டுமே பொருந்தும்.
• முட்டுக்கட்டைக்கான சாத்தியம்: மற்ற ஒத்திசைவு முதன்மைகளை விடக் குறைவாக இருந்தாலும், கவனமாகக் கையாளப்படாவிட்டால் முட்டுக்கட்டை (deadlock) சூழ்நிலைகளை உருவாக்குவது இன்னும் சாத்தியமாகும். பூட்டைப் பெறுதல் மற்றும் விடுவித்தல் தர்க்கத்தை கவனமாக கட்டமைக்கவும்.
• உலாவிக்கு மட்டும் வரையறுக்கப்பட்டது: பூட்டுகள் உலாவிக்குள் வைக்கப்படுகின்றன மற்றும் வெவ்வேறு உலாவிகள் அல்லது சாதனங்கள் முழுவதும் ஒத்திசைவை வழங்காது. சேவையகப் பக்க வளங்களுக்கு, சேவையகமும் பூட்டுதல் பொறிமுறைகளைச் செயல்படுத்த வேண்டும்.
• ஒத்திசைவற்ற தன்மை: API ஒத்திசைவற்றது (asynchronous), இது வாக்குறுதிகள் மற்றும் அழைப்புச் செயல்பாடுகளை கவனமாகக் கையாள வேண்டும்.

சிறந்த நடைமுறைகள்

• பூட்டுகளை குறுகியதாக வைத்திருங்கள்: ஒரு பூட்டு வைத்திருக்கப்படும் நேரத்தைக் குறைப்பதன் மூலம் போட்டி ஏற்படுவதற்கான வாய்ப்பைக் குறைக்கவும்.
• குறிப்பிட்ட பூட்டுப் பெயர்களைப் பயன்படுத்தவும்: உங்கள் பயன்பாட்டின் மற்ற பகுதிகளுடனோ அல்லது மூன்றாம் தரப்பு நூலகங்களுடனோ முரண்பாடுகளைத் தவிர்க்க, விளக்கமான மற்றும் குறிப்பிட்ட பூட்டுப் பெயர்களைப் பயன்படுத்தவும்.
• பிழைகளைக் கையாளவும்: எதிர்பாராத நடத்தையைத் தடுக்க பிழைகளை முறையாகக் கையாளவும்.
• மாற்று வழிகளைக் கருத்தில் கொள்ளுங்கள்: உங்கள் குறிப்பிட்ட பயன்பாட்டு நிகழ்வுக்கு வலைப்பூட்டு API சிறந்த தீர்வா என்பதை மதிப்பீடு செய்யுங்கள். சில சமயங்களில், நம்பிக்கை சார்ந்த பூட்டுதல் அல்லது சேவையகப் பக்க பூட்டுதல் போன்ற பிற நுட்பங்கள் மிகவும் பொருத்தமானதாக இருக்கலாம்.
• முழுமையாக சோதிக்கவும்: உங்கள் குறியீடு ஒரேநேர அணுகலைச் சரியாகக் கையாளுகிறதா என்பதை உறுதிப்படுத்த முழுமையாகச் சோதிக்கவும். ஒரேநேரப் பயன்பாட்டை உருவகப்படுத்த பல உலாவித் தாவல்கள் மற்றும் சாளரங்களைப் பயன்படுத்தவும்.

முடிவுரை

முன்னணி வலைப்பூட்டு API, வலைப் பயன்பாடுகளில் பகிரப்பட்ட வளங்களுக்கான ஒரேநேர அணுகலை நிர்வகிக்க ஒரு சக்திவாய்ந்த மற்றும் வசதியான வழியை வழங்குகிறது. தனிப்பட்ட மற்றும் பகிரப்பட்ட பூட்டுகளைப் பயன்படுத்துவதன் மூலம், நீங்கள் தரவு சிதைவைத் தடுக்கலாம், தரவு நிலைத்தன்மையை உறுதிப்படுத்தலாம் மற்றும் ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தலாம். இதற்கு வரம்புகள் இருந்தாலும், வலைப்பூட்டு API என்பது பகிரப்பட்ட வளங்களுக்கான ஒரேநேர அணுகலைக் கையாள வேண்டிய சிக்கலான பயன்பாடுகளில் பணிபுரியும் எந்தவொரு வலை உருவாக்குநருக்கும் ஒரு மதிப்புமிக்க கருவியாகும். உலாவி இணக்கத்தன்மையைக் கருத்தில் கொள்ளவும், பிழைகளை முறையாகக் கையாளவும், மற்றும் உங்கள் குறியீடு எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த முழுமையாகச் சோதிக்கவும் நினைவில் கொள்ளுங்கள்.

இந்த வழிகாட்டியில் விவரிக்கப்பட்டுள்ள கருத்துகள் மற்றும் நுட்பங்களைப் புரிந்துகொள்வதன் மூலம், நவீன வலையின் கோரிக்கைகளைக் கையாளக்கூடிய வலுவான மற்றும் நம்பகமான வலைப் பயன்பாடுகளை உருவாக்க வலைப்பூட்டு API-ஐ நீங்கள் திறம்படப் பயன்படுத்தலாம்.